<template>
  <transition name = "playDrawer">
    <!--播放列表-->
    <div
        @click.self = "store.commit('UserInterface/SWITCHPLAYDRAWER')"
        v-show = "playDrawer" class = "drawer-container">
      <div class = "play-drawer">
        <!--头部-->
        <div style = "height: 15%; padding: 10px 10px; border-bottom:1px solid #808080;">
          <h2 style = "padding: 8px 10px;">当前播放</h2>
          <div class = "row-container al-center song-operate" style = "justify-content: space-between">
            <span>总 212 首</span>
            <div>
              <span>1</span>
              <el-link>清空列表</el-link>
            </div>
          </div>
        </div>
        <!--列表-->
        <el-scrollbar height = "85%">
          <ul>
            <li class = "row-container al-center song-li" :class = "{'selected-text':isPlay}" v-for = "item in 8"
                :key = "item">
              <i-arrow-right theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3"
                             strokeLinejoin = "miter" />
              <span style = "width: 152px;margin-left: 3px">{{ item }}</span>
              <span style = "width: 62px">千岁酱</span>
              <span>04:04</span>
            </li>

          </ul>
        </el-scrollbar>
      </div>
    </div>
  </transition>

</template>

<script setup>
//显示播放列表
import {computed, ref} from "vue";
import store from "@/store";

//控制播放列表出现
let playDrawer = computed(() => store.state.UserInterface.showPlayDrawer)
let isPlay = ref(true)
</script>

<style lang = "less" scoped>
.drawer-container {
  width: 100%;
  height: 92%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;


  .play-drawer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20vw;
    height: 80vh;
    min-width: 244px;
    background-color: #fff;
    box-shadow: #E0E0E0 0.5px 1px 10px 5px;

    .song-operate {
      padding: 0 10px;

      span {
        font-size: 14px;
        color: #808080;
      }
    }

    :deep(.el-scrollbar) {
      height: 85%;
    }
  }

  .song-li {
    padding: 0 10px;
    height: 34px;
    line-height: 34px;
    opacity: .8;

    &:hover {
      opacity: 1;
      background-color: rgba(130, 129, 129, 0.24) !important;
    }

    &:nth-child(2n) {
      background-color: rgba(128, 128, 128, 0.06);
    }
  }

  .selected-text {
    span {
      color: var(--slider-button-color);
    }
  }


  span {
    font-size: 14px;
    color: rgba(128, 128, 128,);
  }
}


//过渡动画
.playDrawer-enter-active,
.playDrawer-leave-active {
  transition: all 0.3s ease;
}

.playDrawer-enter-from,
.playDrawer-leave-to {
  opacity: 0;
  top: 700px;
}
</style>